<template>
    <div style="max-height:300px;overflow:auto;margin-top:10px;">
        <a-timeline>
        <template v-if="itemField && JSON.stringify(this.itemField)!='{}'">
             <a-timeline-item  v-for="(item, index) in items" :key="index">
                 <p>
                   <span style="margin-left:10px;" v-for="(field,i) in itemField['title'] || []" :key="i">{{item[field]}}</span>  
                 </p>
                 <p>
                    <span style="margin-left:10px;" v-for="(field,i) in itemField['content'] || []" :key="i">{{item[field]}}</span> 
                 </p>
             </a-timeline-item>
        </template>
        <template v-else-if="items && items.length >0">
            <a-timeline-item  v-for="(item, key) in items" :key="key">
                <span style="margin-left:10px;padding-top:10px;" v-for="(val,index) in item" :key="index">{{val}}</span>
            </a-timeline-item>
        </template>
        
    </a-timeline>
    </div>
</template>

<script>
export default {
    name:'Ltimeline',
    props:{
      items:{
          type:Array,
          default:[]
      },
      itemField:{
          type:Object,
          default:()=>{}
      },
    },
    data(){
        return{

        }
    }
}
</script>

<style scoped>

.ant-timeline-item{line-height:24px; padding:0 0 10px !important; }
</style>